<template>
    <div id="home">
        <div class="box">
            <br>
            <div class="kuang">
                <img class="logo" src="../assets/logo2.png" alt="">
                
                <input class="zh" v-model="zh.username" type="text" name=""> <br>
                <input class="mm" v-model="zh.password" type="password" name="">
                <div class="btn">
                    <button style="background-color: #409EFF;" @click="btnd">登录</button>
                    <button @click="btnz">重置</button> 
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>
import {loginRequest} from '../request/api/login'
export default {
    data(){
        return{
            zh:{
                username:'',
                password:''
            }
        }
    },
    methods:{
        btnd(){
            loginRequest(this.zh).then(res=>{
                if(res.data.meta.status==200){
                    sessionStorage.setItem('token',res.data.data.token)
                    this.$router.push('/')
                    
                }else{
                    alert("账号密码错误请重新登录")
                }
            })
        },
        btnz(){
            this.zh.username=''
            this.zh.password=''
        }
    }
}
</script>

<style scoped>
    .box{
        background-color: #2B4B6B;
        width: 100vw;
        height: 100vh;
    }
    .kuang{
        width: 400px;
        height: 220px;
        padding-top: 40px;
        background-color: white;
        margin:240px auto;
        position: relative;
        border-radius: 5px;
    }
    .zh{
        margin-top: 70px;
        margin-bottom: 20px;
    }
    .zh,.mm{
        width: 360px;
        height: 30px;
        margin-left: 20px;
        border: 1px solid rgb(212, 212, 212);
    }
    .btn{
        position: absolute;
        right: 7px;
        bottom: 15px;
    }
    .btn button{
        width: 60px;
        height: 30px;
        margin-left: 10px;
        border: none;
        border-radius: 2px;
        cursor: pointer;
    }
    .logo{
        width: 120px;
        height: 120px;
        border-radius: 50%;
        position: absolute;
        top: -60px;
        left: calc(400px / 2 - 120px / 2 );
        background-color: #EEEEEE;
        border: 3px solid white;
        box-shadow: 0px 2px 3px 5px #f5f4f4;
}
</style>